<template>
  <div>
    <div class="content-test">name---{{ person.name }}</div>
    <div class="content-test">age---{{ person.age }}</div>
    <div class="content-test" v-text="person.age"></div>
    <input :value="person.age" />
    <!--    <input v-bind:value="person.age" />-->
    <input v-model.number="person.age" />

    <button @click="increAge">TestOne</button>
    <!--    <button v-on:click="increAge">TestOne</button>-->
    <div style="background-color: #88b11f">
      <template v-for="(item, i) in contents">
        <div :key="i" style="background-color: #b1340e; width: 200px">
          {{ i }}====={{ item }}
        </div>
      </template>
    </div>
    <div style="background-color: #10b119">
      <template v-for="(item, i) in students">
        <div :key="i">
          <span>{{ item.name }}</span> ====>>>
          <span>{{ item.sex }}</span>
        </div>
      </template>
    </div>
    <div style="background-color: #d6b316">
      sex为true的信息
      <template v-for="(e, i) in students">
        <template v-if="e.sex">
          <span :key="i">
            {{ e.name }}
          </span>
        </template>
      </template>
    </div>
    <div style="background-color: aliceblue">
      <template v-for="(e, i) in stus">
        <span :key="i">
          {{ e.name }}
        </span>
      </template>
    </div>
    <div>{{ wangqiAge }}</div>
    <el-button>dsfdsafd</el-button>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "TestOne",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      person: {
        name: "zhangsan",
        age: 18,
      },
      contents: [1, 3, 5, 7, 9],
      students: [
        { name: "wangwu", sex: true },
        { name: "lsii", sex: false },
        { name: "zhaoliu", sex: true },
      ],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    wangqiAge() {
      return this.person.age + 8;
    },
    stus() {
      return this.students.filter((x) => {
        return x.sex;
      });
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    increAge() {
      this.person.age++;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.content-test {
  width: 200px;
  height: 2rem;
  background-color: #88b11f;
}
</style>
